<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="filter-container">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="18">
          <el-button class="filter-item" @click="refresh()">刷新</el-button>
        </el-col>
        <el-col :xs="24" :sm="6">
          <el-button class="filter-item" @click="print()" icon="el-icon-circle-plus">打印</el-button>
        </el-col>
      </el-row>
    </div>

    <div id='printBox'>
      <div v-for="shichang in data.shichangs" class="printcontainer">
        <div> {{data.kaoshi.name}}</div>
        <div> {{shichang.num}}-{{shichang.address}}</div>
        <div class="biaoqianbox">
          <table border="1">
            <tr>
              <td>序号</td>
              <td>学号</td>
              <td>姓名</td>
              <td>准考证号</td>
              <td>试场号</td>
              <td>座位号</td>
            </tr>
            <tr v-for="(kaosheng,i) in shichang.kaoshengs">
              <td>{{i+1}}</td>
              <td>{{kaosheng.xh}}</td>
              <td>{{kaosheng.name}}</td>
              <td>{{kaosheng.zhunkaozhenghao}}</td>
              <td>{{kaosheng.shichangnum}}</td>
              <td>{{kaosheng.zuoweihao}}</td>
            </tr>
          </table>
        </div>
      </div>
      <div style="page-break-after: always;"></div>
    </div>

  </div>
</template>

<script>
  import screenHeight from '@/utils/screen-height'
  import { listForShichangPrint } from '@/api/kaoshi_kaosheng'

  export default {
    name: 'KaoshiKaoshengPrintByShichang',
    props: ['kaoshi_id','kaoshi_name'],
    data() {
      return {
        height: 680,
        loading: false,
        data: []
      }
    },
    created() {
      this.height = screenHeight()
      this.list()
    },
    methods: {
      print(){
        var printBox = document.getElementById('printBox');
        //拿到打印的区域的html内容
        var newContent =printBox.innerHTML;
        //将旧的页面储存起来，当打印完成后返给给页面。
        var oldContent = document.body.innerHTML;
        //赋值给body
        document.body.innerHTML = newContent;
        //执行window.print打印功能
        window.print();
        // 重新加载页面，以刷新数据。以防打印完之后，页面不能操作的问题
        window.location.reload();
        document.body.innerHTML = oldContent;
        return false;
      },
      // 列表
      list() {
        this.loading = true
        listForShichangPrint({
          kaoshi_id: this.kaoshi_id
        }).then(res => {
          this.data = res.data
          console.log(this.data)
        })
      },
      // 刷新
      refresh() {
        this.query = this.$options.data().query
        this.list()
      }
    }
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }

  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }

  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }

  table tr:nth-child(odd) {
    background: #fff;
  }

  table tr:nth-child(even) {
    background: #F5FAFA;
  }

  input {
    outline-style: none;
    border: 0px;
    width: 70px;
  }
  .printcontainer{float:left;width:700px; height:1050px;}
  .biaoqianbox { width:350px; height:1050px;float:left}
</style>
